<template>
  <div class="update-img"
       v-loading="loading"
       :element-loading-text="'上传中...'+progress"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)">
    <div style="color:#333;">{{videoNema}}</div>
    <div style="float:left"
         class="img-box "
         v-if="dataList">
      <audio @canplaythrough="myFunction"
             :src="dataList?imgRoot+dataList:''"
             controls
             accept="video/*"
             height="150"
             width="200">
        您的浏览器不支持 video 标签。
      </audio>
      <i class="clear-icon"
         @click="clearImg()">×</i>
    </div>
    <div style="float:left"
         class="img-box float-left add-img text-center"
         v-else>
      <label for="audioInput">+</label>
      <input style="opacity:0;"
             type="file"
             id="audioInput"
             @change='addVideo'>
    </div>

  </div>
</template>

<script>
import * as api from './../api/api'
import axios from 'axios';
import { IMG_ROOT, OSS_RUL } from './../config'
export default {
  props: {
    videoUrl: {
      default: '',
      type: String
    }
  },
  data () {
    return {
      imgRoot: IMG_ROOT,
      loading: false,
      progress: '',
      audioLength: '',
      videoNema: '',
      dataList: '',
      client: '',
    }
  },
  watch: {
    videoUrl (a, b) {
      if (a) {
        this.dataList = a;
      }
    }
  },
  methods: {
    myFunction (ele) {
      let vm = this;
      var hour = parseInt((ele.target.duration) / 3600);
      var minute = parseInt((ele.target.duration % 3600) / 60);
      var second = parseInt(ele.target.duration % 60);
      hour = hour < 10 ? ('0' + hour) : hour;
      minute = minute < 10 ? ('0' + minute) : minute;
      second = second < 10 ? ('0' + second) : second;
      vm.audioLength = `${hour}:${minute}:${second}`;
      vm.$emit('change', vm.dataList, vm.audioLength);
    },
    clearImg () {
      this.$emit('clear');
      this.videoNema = '';
      this.dataList = '';
    },
    getRight () {
      this.client = new OSS.Wrapper({
        region: OSS_RUL,
        secure: true,//https
        endpoint: OSS_RUL,
        accessKeyId: 'LTAI4FwoNkfFXZmYBwXg6aRv',
        /*accessKeyId,accessKeySecret两者到阿里云控制台获得*/
        accessKeySecret: 'FROKDq5vfj196CzHd9ArrAQteaBT9f',
        bucket: 'hycc' /*装图片的桶名*/
      });
    },
    addVideo (event) {
      var vm = this;
      vm.getRight();
      var file = event.target.files[0];
      let ext = event.target.value.toLowerCase().split('.').splice(-1);
      var storeAs = (new Date()).getTime() + '.' + ext;
      vm.loading = true;
      // 调用上传方法
      vm.client.multipartUpload(storeAs, file, {
        progress: function* (percentage) {
          let fileloadingNum = Math.ceil(percentage * 100) + '%'
          vm.progress = fileloadingNum

        }
      }).then(function (res) {
        vm.loading = false;
        if (res.res.status == 200) {
          vm.dataList = res.name;
          // setTimeout(()=>{
          //     vm.$emit('change',vm.dataList,vm.audioLength);
          // },1600);
          vm.$message({
            message: '上传成功！',
            type: 'success'
          });
        }
      }).catch(function (err) {
        vm.loading = false;
        Message({
          showClose: true,
          message: '服务器错误！'
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.update-img {
  display: inline-block;
  margin-left: 10px;
  .img-box {
    position: relative;
    display: inline-block;
    height: 160px;
    width: 160px;
    color: #dedede;
    margin-right: 20px;
    padding: 20px;
    box-sizing: border-box;
    .img {
      height: 100%;
      width: 100%;
    }
    .clear-icon {
      position: absolute;
      top: 0;
      left: 0;
      padding: 0 6px;
      font-size: 20px;
      border-radius: 50%;
      background: #cd4640;
      color: #fff;
    }
  }
  .add-img {
    line-height: 110px;
    border: 1px dotted #dedede;
    label {
      font-size: 40px;
      display: inline-block;
      text-align: center;
      width: 100%;
      height: 100%;
    }
    input {
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
    }
  }
}
</style>
